@charset "utf-8";

@import "reset";

@function r($px){
    @return ($px/40)*1rem;
}
// 减半
@function half($px){
    @return ($px/2)*1px;
}

html,body{
    height: 100%;
    position: relative;
}
// 头部
header{
    position: absolute;
    top: 0;
    width: r(750);
    height: half(192);
    padding: half(48) half(23);
    box-sizing: border-box;
    .back{
        width: 59px;
        height: 26px;
        border: 2px solid #ff9344;
        line-height: 26px;
        text-align: center;
        border-radius: 25px;
        a{
            color: black;
            font-size: 21px;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .title{
        font-size: 20px;
        text-align: center;
    }
    
    .selectBar{
        width: half(159);
        height: half(56);
        border: solid 1px #ff9344;
        background-image: url(../img/dsjx_09.jpg);
        background-repeat: no-repeat;
        background-position: right 4px center;
        background-size: 15px 8px;
        select{
            -webkit-appearance: none;
            appearance: none;
            border: none;
            height: 100%;
            width: 100%;
            display: block;
            background: transparent;
        }
    }
    
    .searchBar{
        margin: half(36) auto 0;
        width: r(266);
        height: half(51);
        border: 1px solid #ff9344;
        border-radius: half(51);
        overflow: hidden;
        
        input[type="search"]{
            width: calc(100% - 35px);
            height: 100%;
            vertical-align: top;
            border: none;
            padding-left: 12px;
            font-size: 12px;
        }
        input[type="image"]{
            margin-top: 4px;
            width: 18px;
            height: half(36);
            vertical-align: top;
        }
    }
    
}

//主体
section{
    position: absolute;
    width: r(750);
    top: half(225);
    bottom: half(160);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .cp1{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(115);
        padding-right: r(115);
        .every{
            text-align: center;
            font-size: r(26);
        }
        .way{
            margin-top: r(15);
            >div{
                width: r(124);
                height: r(64);
                line-height: r(64);
                font-size: r(20);
                text-align: center;
                background-color: #dcdcdc;
                margin-right: r(6);
                margin-bottom: r(3);
                a{
                    color: #898989;
                }
            }
        }
    }
    .cp2{
        width: 100%;
        height: r(115);
        line-height: r(115);
        box-sizing: border-box;
        padding-left: r(39);
        padding-right: r(21);
        .cpl{
            font-size: r(30);
            img{
                width: r(32);
            }
            span{
                margin-left: r(10);
            }
        }
        .cpr{
            font-size: r(24);
            a{
                color: black;
            }
            img{
                width: r(25);
            }
        }
    }
    .cp3{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(22);
        padding-right: r(22);
        .w280{
            img{
                width: r(280);;
            }
        }
        .w410{
            margin-left: r(10);
            img{
                width: r(410);
            }
        }
        .w200{
            margin-left: r(10);
            img{
                width: r(190);
            }
        }
        .w205{
            margin-left: r(10);
            img{
                width: r(205);
            }
        }
    }
    .cp4{
        width: 100%;
        height: r(115);
        line-height: r(115);
        box-sizing: border-box;
        padding-left: r(36);
        padding-right: r(21);
        .cpl{
            font-size: r(30);
            img{
                width: r(41);
            }
            span{
                margin-left: r(10);
            }
        }
        .cpr{
            font-size: r(24);
            a{
                color: black;
            }
            img{
                width: r(25);
            }
        }
    }
    .cp5{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(24);
        padding-right: r(15);
        padding-bottom: r(28);
        font-size: 0;
        div{
            width: r(210);
            height: r(200);
            overflow: hidden;
            margin-right: r(25);
            img{
                height: 100%;
            }
        }
    }
}


// 底部
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: r(750);
    height: half(135);
    li{
        width: 25%;
        text-align: center;
        .iconfont{
            font-size: 36px;
            color: white;
            -webkit-text-stroke: 1px #FF9344;
        }
        p{
            font-size: 13px;
            color: black;
        }
        .icon-compass-o{
            color: #FF9344;
        }
    }
}    